<template>
<div class="waterProject">
  <img src="./../assets/product/pCarousel.png" alt="pCarousel" class="pCarousel">
  <h3 class="title">WATER-PROJECT</h3>
  <p class="brif">水处理工程</p>
  <div class="content fl">
    <div class="items">
    <router-link :to="{name:'ProjectDet',params:{pro:con.id}}">
        <img src="./../assets/project/projectItem.png" alt="projectItem">
        <div class="con">
          <h4>XXX项目</h4>
          <p>地点：XXX</p>
          <p>时间：XXXX年XX月XX日<span>至</span>XXXX年XX月XX日</p>
          <p>项目小组：XXXX小组</p>
        </div>
      </router-link>
    </div>
    <div class="items">
      <img src="./../assets/project/projectItem.png" alt="projectItem">
      <div class="con">
        <h4>XXX项目</h4>
        <p>地点：XXX</p>
        <p>时间：XXXX年XX月XX日<span>至</span>XXXX年XX月XX日</p>
        <p>项目小组：XXXX小组</p>
      </div>
    </div>
    <div class="items">
      <img src="./../assets/project/projectItem.png" alt="projectItem">
      <div class="con">
        <h4>XXX项目</h4>
        <p>地点：XXX</p>
        <p>时间：XXXX年XX月XX日<span>至</span>XXXX年XX月XX日</p>
        <p>项目小组：XXXX小组</p>
      </div>
    </div>
    <div class="items">
      <img src="./../assets/project/projectItem.png" alt="projectItem">
      <div class="con">
        <h4>XXX项目</h4>
        <p>地点：XXX</p>
        <p>时间：XXXX年XX月XX日<span>至</span>XXXX年XX月XX日</p>
        <p>项目小组：XXXX小组</p>
      </div>
    </div>
    <div class="items">
      <img src="./../assets/project/projectItem.png" alt="projectItem">
      <div class="con">
        <h4>XXX项目</h4>
        <p>地点：XXX</p>
        <p>时间：XXXX年XX月XX日<span>至</span>XXXX年XX月XX日</p>
        <p>项目小组：XXXX小组</p>
      </div>
    </div>
    <div class="items">
      <img src="./../assets/project/projectItem.png" alt="projectItem">
      <div class="con">
        <h4>XXX项目</h4>
        <p>地点：XXX</p>
        <p>时间：XXXX年XX月XX日<span>至</span>XXXX年XX月XX日</p>
        <p>项目小组：XXXX小组</p>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      con: []
    }
  },
  methods : {
    getData() {
      this.$http({
        url:'http://localhost:2000/getjson/projectDet',
        method: 'get'
      }).then((res)=> {
        this.con = res.data;
        console.log(1)
      }).catch((res)=> {
        console.log('error:',res)
      })
    }
  },
    created() {
      this.getData()
    }
}
</script>

<style scoped>
.pCarousel {
  width: 100%;
}
.fl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.items {
  width: 27rem;
  height: 20rem;
  background-color: #d4eaed;
  margin-bottom: 6rem;
}
.items > a > img,.items >img {
  width: 27rem;
  height: 12rem;
}
.con {
  padding: 0.9rem 1.3rem;
  font-weight: 600;
}
.con h4 {
  font-size: 1.1rem;
  font-weight: 700;
}
.con > p > span {
  font-size: 0.8rem;
  display: inline-block;
  margin: 0 4px;
  color: #666666;
}
</style>
